import { defineComponent, ref } from 'vue'
import { sysRole } from '@/api/setting'
import usePagination from '@/hooks/usePagination'
import Model from './Model'
import SetPermission from './SetPermission'
import type { ModelType, SetPermissionType } from './types'
import { deleteRole } from '@/api/setting'
import { message, Modal } from 'ant-design-vue'

export default defineComponent({
  name: 'RoleCom',
  setup() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index'
      },
      {
        title: '角色',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description'
      },
      {
        title: '操作',
        dataIndex: 'handle',
        key: 'handle'
      }
    ]
    const modelRef = ref<ModelType>()
    const setPermissionlRef = ref<SetPermissionType>()
    function setPermissionModal(record: any) {
      setPermissionlRef.value!.rolenData = record
      setPermissionlRef.value?.handleVisible()
      setPermissionlRef.value?.getRoleData(record.id)
    }
    function addModal() {
      modelRef.value!.mode = 'add'
      modelRef.value?.handleVisible()
    }
    function eaitModal(record: any) {
      console.log(record)
      modelRef.value!.mode = 'edit'
      modelRef.value!.formState = Object.assign({}, record)
      modelRef.value?.handleVisible()
    }
    async function deleteModal(id: string) {
      Modal.confirm({
        title: '删除',
        content: '确认删除吗?',
        okType: 'primary',
        async onOk() {
          const res = (await deleteRole(id)) as any
          message.success(res.message)
          run()
        }
      })
    }

    const { dataSource, run, loading, pagination, pageSize, current } =
      usePagination(sysRole, {
        formatResult: (res: any) => res.data.rows,
        pagination: {
          pageSize: 10,
          currentKey: 'page',
          pageSizeKey: 'pagesize'
        }
      })

    return () => (
      <>
        <a-button type="primary" onClick={addModal}>
          新增角色
        </a-button>
        <a-table
          columns={columns}
          row-key="1"
          data-source={dataSource.value}
          pagination={pagination.value}
          loading={loading.value}
          onChange={run}
          v-slots={{
            bodyCell: ({ column, record, index }: any) => {
              if (column.dataIndex === 'handle') {
                return (
                  <div>
                    <a-button
                      type="link"
                      onClick={() => setPermissionModal(record)}
                    >
                      分配权限
                    </a-button>
                    <a-button type="link" onClick={() => eaitModal(record)}>
                      编辑
                    </a-button>
                    <a-button
                      type="link"
                      onClick={() => deleteModal(record.id)}
                    >
                      删除
                    </a-button>
                  </div>
                )
              } else if (column.dataIndex === 'index') {
                return (current.value - 1) * pageSize.value + index + 1
              }
            }
          }}
        />
        <Model ref={modelRef} onRun={run} />
        <SetPermission ref={setPermissionlRef} />
      </>
    )
  }
})
